<div class="col-md-12">
    <div class="panel panel-primary">
        <header class="panel-heading">
            <div class="row">
                <div class="col-md-6">
                    <span class="col-sm-2"> Shards </span>
                </div>
            </div>
        </header>

        <table ng-table="tableParams" show-filter="true" class="table table-striped table-hover" ng-table-columns-binding="cols">
            <tr ng-repeat="shard in $data">
                <td data-title="'cluster'" filter="{ clusterName : 'text' }">
                    <a href="/#/cluster_dc_shards/{{shard.clusterName}}/">{{ shard.clusterName }}</a>
                </td>
                <td ng-if="showUnhealthyShardOnly" data-title="'分片'" ng-bind="shard.shardName" filter="{ shardName : 'text' }"></td>
                <td ng-if="showUnhealthyShardOnly" data-title="'问题机房'">
                    <span ng-repeat="dcName in shard.dcNames">
						<span ng-if="$index != 0">,&nbsp;</span>
						{{dcName}}
					</span>
                </td>
                <td data-title="'主数据中心'" ng-bind="getActiveDcName(shard)"></td>
                <td data-title="'集群类型'" filter="{clusterType: 'select'}" filter-data="clusterTypes" ng-bind="getTypeName(shard.clusterType)"></td>
                <td data-title="'描述'" ng-bind="shard.clusterDescription | limitTo:50" ></td>
                <td data-title="'组织'" ng-bind="shard.clusterOrgName" ></td>
                <td data-title="'联系人邮箱'" ng-bind="shard.clusterAdminEmails| limitTo:50" ></td>
                <td data-title="'操作'">
                    <a href="/#/cluster_form?clusterName={{shard.clusterName}}&type=retrieve" class="btn btn-info btn-xs">Cluster</a>&nbsp;
                    <a href="/#/migration_event_list?clusterName={{shard.clusterName}}" class="btn btn-info btn-xs">Migration</a>&nbsp;
                </td>
            </tr>
        </table>
    </div>
</div>

<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
</a>

